<template>
    <div class="contion">
        <div class="forgot">
            <div class="forgot_1">
                <el-button @click="back">
                    <van-icon name="arrow-left" size="25" />
                </el-button>
                <span style="font-size:25px;margin-bottom:20px;color:black;margin-top:20px"><b>输入新密码</b></span>
                <span>请输入新密码</span>
            </div>
            <div class="forgot_2">
                <van-cell-group inset>
                    <van-field
                        v-model="password"
                        label="密码"
                        placeholder="请输入新密码"
                        label-align="top"
                        type="password" id="confirm-password"
                        style="border:#E44F32 2px solid;width:350px;height:70px; border-radius:15px;border-radius:15px;margin-bottom:20px;"
                    />
                </van-cell-group>
                <img src="../img/3.png">
                <div class="forgot_3">
                    <el-button @click="datapassword()">保存</el-button>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {useRouter} from 'vue-router'

const router = useRouter()

const back = () =>{
    router.push('/forgot')
}

const password = ref('')

const datapassword = () =>{
    // console.log(localStorage.getItem('account'))
    // console.log(password.value)
    axios.put("http://127.0.0.1:8000/home/user/", {account:localStorage.getItem('account'),password:password.value}).then(res=>{
        console.log(res)
        if(res.data.code==200){
            ElMessage.success(res.data.msg)
            router.push('/update')
        }
        else{
            ElMessage.error(res.data.msg)
        }
    })
}
</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.forgot{
    width: 500px;
    height: 700px;
}

.forgot_1{
    display: flex;
    flex-direction: column;
    font-size:15px;
    color:darkgray;
    margin-top: 150px;
}

.forgot_1 button{
    background-color: #FFFFFF;
    border: #FFFFFF;
    margin-right: 500px;
    
}

.forgot_2{
    margin-top: 20px;
}

.forgot_3 button{
    margin-top: 50px;
    width: 300px;
    height: 50px;
    background-color: #E44F32;
    border: #E44F32 1px;
    color:#FFFFFF;
    margin-left: 20px;
}
</style>